<template>
  <view class="applicationDrag">
    <AppList :listData="mygrids" @listChange="listChange"></AppList>
    <u-divider fontSize="24">{{$t('以上应用展示在首页')}}（{{$t('可长按拖拽排序')}}）</u-divider>
    <u-card
      :border="false"
      :foot-border-top="false"
      :head-border-bottom="false"
      border-radius="0"
      class="lz-card"
      margin="0"
      padding="0"
    >
      <view v-for="(Coin, cindex) in SysCoin" :key="cindex" slot="body">
        <view class="lz-card-body-title">{{ Coin.name }}</view>
        <u-grid :border="false" :col="5" class="lz-grid">
          <u-grid-item v-for="(item, index) in Coin.value" :key="index">
            <view
              :class="[item.code, item.disable === 0 ? 'close-item' : '']"
              :style="item.color"
              class="iconfont lz-grid-iconfont"
            ></view>
            <view class="grid-text">{{ $t(item.name) }}</view>
            <view v-if="item.disable === 1" class="add-item" @click="additem(item)">
              <u-icon name="plus-circle-fill"></u-icon>
            </view>
          </u-grid-item>
        </u-grid>
      </view>
    </u-card>
    <u-button
      :custom-style="customStyle"
      :ripple="true"
      ripple-bg-color="#55aaff"
      shape="circle"
      type="success"
      @click="ConfirmEdit()"
    >
      {{$t('确认编辑')}}
    </u-button>
    <u-no-network></u-no-network>
  </view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import AppList from '@/components/healer-dragList/AppList.vue'

export default {
  components: {
    AppList
  },
  data() {
    return {
      customStyle: {
        background: 'linear-gradient(to right, #00aaff 0%,#0079FF 100%)',
        margin: '80rpx 0 20rpx'
      },
      props: {
        label: 'name'
      },
      mygrids: [], //已选择的应用
      SysCoin: [] //全部应用
    }
  },
  computed: mapGetters(['userInfo', 'api', 'app']),
  onReady() {},
  onLoad(e) {
    uni.setNavigationBarTitle({title: this.$t('应用编辑')})
    //获取所有图标
    this.getPhoneIcons()
  },
  onShow() {},
  methods: {
    //获取所有图标
    getPhoneIcons() {
      this.$u.post(this.api.GLOBAL_user_getPhoneIcons, {}).then((res) => {
        if (res.code === 200) {
          //已选择的应用
          this.mygrids = res.data.MyCoin
          //全部应用
          this.SysCoin = res.data.SysCoin
          //筛选出哪些可以添加
          this.filterAddList()
        }
      })
    },
    //筛选出哪些可以添加
    filterAddList() {
      let arrHave = this.mygrids.map((item) => item.id) //已经拥有的
      this.SysCoin.forEach((list) => {
        list.value.map((item) => {
          if (arrHave.includes(item.id)) {
            this.$set(item, 'disable', 0)
          } else {
            this.$set(item, 'disable', 1)
          }
        })
      })
    },
    additem(item) {
      this.mygrids.push(item)
      this.$set(item, 'disable', 0)
    },
    listChange(option) {
      this.mygrids = option
      //筛选出哪些可以添加
      this.filterAddList()
    },
    ConfirmEdit() {
      let arrHave = this.mygrids.map((item) => item.id) //已经拥有的
      let req = arrHave.join(',')
      this.$u
        .post(this.api.GLOBAL_auth_user_updatePhoneShortcuts, { phoneIcons: req })
        .then((res) => {
          if (res.code === 200) {
            uni.showToast({
              title: this.$t('res.msg'),
              icon: 'none'
            })
            uni.navigateBack({
              delta: 1
            })
          }
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.applicationDrag {
  background-color: #fff;
  height: 100%;
  width: 100%;
  padding: 20rpx 0;

  .add-item {
    position: absolute;
    right: 0;
    top: 0;
  }

  .close-item {
    opacity: 0.5;
  }
}
</style>
